<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welcome</title>
<link type="text/css" rel="stylesheet" href="css/main.css" />
<link type="text/css" rel="stylesheet" href="css/index.css" />
<script type="text/javascript" src="script/jquery.js" ></script>
<script type="text/javascript" src="script/slides.min.jquery.js"></script>
<script type="text/javascript" src="script/main_ui_control.js"></script>
<script type="text/javascript" src="script/jtip.js" ></script>
<script type="text/javascript">
function check_form(){
	var b = true;
	$(".register_form").find("input[type!='button']").each(function(){
		switch(this.name){
			case "email":
				b = !isNaN(this.value)&&this.value.length==13;
				break;
			case "password":
			case "reset" :
				b = this.value.length>=6&&this.value.length<=16&&!(this.value.length<9&&!isNaN(this.value));
				break;
			case "secure":
				b = this.value.length>0;
				break;
		}
		return b;
	});
	if(!b)$("input[name='submit_btn']").attr("disabled","disabled");
	else $("input[name='submit_btn']").attr("disabled","");
}
function ShowDiv(show_div,bg_div){
	document.getElementById(show_div).style.display='block';
	document.getElementById(bg_div).style.display='block' ;
	var bgdiv = document.getElementById(bg_div);
	bgdiv.style.width = document.body.scrollWidth;
	// bgdiv.style.height = $(document).height();
	$("#"+bg_div).height($(document).height()-58);
	$("#"+show_div).children("div").children("span").click(function(){CloseDiv(show_div,bg_div);});
};
//关闭弹出层
function CloseDiv(show_div,bg_div){
	document.getElementById(show_div).style.display='none';
	document.getElementById(bg_div).style.display='none';
};
window.onload = function(){
	//绘制菜单背景，需要html5支持
	drawBG();
	//菜单动画
	menu_animation();
	//首页图片轮播
	$(function(){
		$('#slides').slides({
			preload: true,
			preloadImage: 'pic/loading.gif',
			play: 5000,
			pause: 2500,
			hoverPause: true
		});
	});
	//菜单事件绑定
	$("#menu_item_login").click(function(){
		$("#menu_item_login").hide();
		$("#login_form").show();
	});
	$("#menu_item_register").click(function(){
		ShowDiv('register_form_div','fade_overlay');
	});
		
	//表单验证
	check_form();
	$("input[type!='button']").keyup(check_form);
}
</script>
</head>

<body>
    <div id="slides">
        <div class="slides_container">
            <img src="pic/mybre1.jpg">
            <img src="pic/mybre2.jpg">
            <img src="pic/mybre3.jpg">
            <img src="pic/mybre4.jpg">
            <img src="pic/mybre5.jpg">
        </div>
        <a href="#" class="prev"><img src="pic/arrow-prev.png" width="24" height="43" alt="Prev"></a>
        <a href="#" class="next"><img src="pic/arrow-next.png" width="24" height="43" alt="Next"></a>
    </div>
<div id="_bottom_menu">
    <ul id="bottom_menu_left">
        <li id="menu_item_login">登录</li>
        <form id="login_form">
        	<div class="text_input">
            	<span>邮箱</span>
                <input type="text" maxlength="13" data-behavior="placeholder" placeholder="学号/工号" />
                <span>@whu.edu.cn</span>
            </div>
            <div class="text_input">
            	<span>密码</span>
                <input type="password" maxlength="13" />
            </div>
            <input type="submit" />
        </form>
    </ul>
    <ul id="bottom_menu_right">
        <li id="menu_item_register">注册</li>
    </ul>
    <canvas id="bg_canvas_left"></canvas>
    <canvas id="bg_canvas_right"></canvas>
</div>
<div id="fade_overlay" class="black_overlay"></div>
<div id="register_form_div" class="white_content">
	<div class="off">
		<span>[X]</span>
	</div>
    <img src="img/register.png" class="icon" /><h>注册</h>
    <hr />
	<ul class="register_form"><form>
    	<li class="jTip" id="_email"><span>我的邮箱</span>：<div class="inside_input"><input type="text" name="email" />@whu.edu.cn</div></li>
        <div class="info_msg">邮箱账号的说明</div>
        <li class="jTip" id="_type"><span>账号类型</span>：
        <input type="radio" name="type" checked="checked" value="学生" />学生<input type="radio" name="type" value="老师" id="_radio_right" />老师</li>
        <div class="info_msg">账号类型的说明</div>
        <li class="jTip" id="_password"><span>创建密码</span>：<input type="password" name="password" /></li>
        <div class="info_msg">密码说明</div>
        <li class="jTip" id="_confirm"><span>重置密码</span>：<input type="password" name="reset" /></li>
        <div class="info_msg">确认密码说明</div>
        <li class="jTip" id="_secure"><span>验证码</span>：<input type="text" name="secure" /><img src="" alt="验证码" /></li>
        <div class="info_msg">验证码说明</div>
        <li><input type="button" value="注册" name="submit_btn" /></li>
    </form></ul>
</div>
<script language="javascript">

</script>
</body>
</html>
